<template>
    <div>
        <transition name="fade">
            <div id="search">
                <el-form   :inline="true">
                    <el-form-item label="统计方式">
                        <el-select v-model="searchForm.census_status" placeholder="统计方式" clearable>
                            <el-option v-for="item in censuss_list" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="省份" v-show="!searchForm.province_status">
                        <el-select placeholder="请选择省份" v-model="searchForm.province_id" @change="regionCitys()"
                            :disabled="searchForm.province_status" clearable>
                            <el-option :key="item.id" :label="item.district" :value="item.id" v-for="item in province_list">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="城市" v-show="!searchForm.city_status">
                        <el-select placeholder="请选择城市" v-model="searchForm.city_id" @change="regionCounty()"
                            :disabled="searchForm.city_status" clearable>
                            <el-option :key="item.id" :label="item.district" :value="item.id" v-for="item in city_list">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="区县" v-show="!searchForm.district_status">
                        <el-select placeholder="请选择区县" v-model="searchForm.district_id"
                            clearable>
                            <el-option :key="item.id" :label="item.district" :value="item.id" v-for="item in district_list">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="机构名称" v-show="!searchForm.institution_status">
                        <el-select placeholder="请选择机构" v-model="searchForm.institution_id" filterable clearable>
                            <el-option :key="item.id" :label="item.institution_name" :value="item.id" v-for="item in institution_list">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="筛查年度">
                        <el-select placeholder="请选择筛查年度" v-model="searchForm.years" clearable filterable>
                            <el-option :key="item.id" :label="item.years" :value="item.years"
                                v-for="item in year_list">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="筛查日期">
                        <el-date-picker v-model="searchForm.ct_date" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            align="right">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label=" ">
                        <el-button @click="submitForm()" icon="el-icon-search" type="primary">查询</el-button>
                        <el-button @click="handleClickExport()" icon="el-icon-search" size="" type="primary">导出
                        </el-button>
                        <el-button @click="handleReset()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <div id="body">
            <el-table :data="tableData" style="width: 100%" v-show="searchForm.census_status == '1'">
                <el-table-column prop="province_name" label="省名称" align="center"></el-table-column>
                <el-table-column prop="city_name" label="市名称" align="center"></el-table-column>
                <el-table-column prop="district_name" label="县区名称" align="center"></el-table-column>
                <el-table-column prop="institution_name" label="上报机构" align="center"></el-table-column>
                <el-table-column align="center" label="合计">
                     <el-table-column prop="summation_score" label="评分" align="center"></el-table-column>
                    <el-table-column prop="summation_task_number" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="summation_quantity_completion" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="summation_percentage_complete" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="summation_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="summation_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="summation_treatment_rate" label="治疗率（%）" align="center"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="诊断性筛查">

                     <el-table-column prop="primary_task_number" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="primary_quantity_completion" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="primary_percentage_complete" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="primary_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="primary_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="primary_treatment_rate" label="治疗率%" align="center"></el-table-column>  
                </el-table-column>

                <el-table-column align="center" label="随访">
                     <el-table-column prop="follow_should_number" label="应随访数" align="center"></el-table-column>
                    <el-table-column prop="follow_follow_number" label="实际随访数" align="center"></el-table-column>
                    <el-table-column prop="follow_follow_rate" label="随访率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="follow_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="follow_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="follow_treatment_rate" label="治疗率（%）" align="center"></el-table-column>
                </el-table-column>
            </el-table>
            <el-table :data="tableData" style="width: 100%" v-show="searchForm.census_status == '2'">
                <el-table-column prop="province_name" label="省名称" align="center"></el-table-column>
                <el-table-column prop="city_name" label="市名称" align="center"
                    v-if="searchForm.census_status == 2 && searchForm.province_id"></el-table-column>
                <el-table-column prop="district_name" label="县区名称" align="center"
                    v-if="searchForm.census_status == 2 && searchForm.city_id"></el-table-column>
                <el-table-column prop="institution_name" label="上报机构1" align="center" v-if="searchForm.census_status == 2 &&
                    searchForm.city_id &&
                    searchForm.district_id
                    "></el-table-column>
           <el-table-column align="center" label="合计">
                     <el-table-column prop="summation_score" label="评分" align="center"></el-table-column>
                    <el-table-column prop="summation_task_number" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="summation_quantity_completion" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="summation_percentage_complete" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="summation_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="summation_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="summation_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="summation_treatment_rate" label="治疗率（%）" align="center"></el-table-column>
                </el-table-column>


            <el-table-column align="center" label="诊断性筛查">

                     <el-table-column prop="primary_task_number" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="primary_quantity_completion" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="primary_percentage_complete" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="primary_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="primary_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="primary_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="primary_treatment_rate" label="治疗率%" align="center"></el-table-column>  
                </el-table-column>

                <el-table-column align="center" label="随访">
                     <el-table-column prop="follow_should_number" label="应随访数" align="center"></el-table-column>
                    <el-table-column prop="follow_follow_number" label="实际随访数" align="center"></el-table-column>
                    <el-table-column prop="follow_follow_rate" label="随访率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_case_load" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="follow_recall_factor" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_early_number" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="follow_early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow_treatment_number" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="follow_treatment_rate" label="治疗率（%）" align="center"></el-table-column>
                </el-table-column>
            </el-table>
        </div>

        <div id="page">
            <page @childByPage="childByPage" :rawPageNumber="pageNumber" :rawPageSize="pageSize" :rawTotal="total"></page>
        </div>
    </div>
</template>

<script>
import PersButton from "@/components/PersButton.vue";
import {regionProvince, regionCity, regionCounty} from "@/api/region/region";
//  import {institutionAll} from "@/api/institutions/institutions";
  import {getDataReportList} from "@/api/total/dataReport";
// import {getConfigList} from "@/api/config/config";
import page from "./page.vue";
import {listTask} from "@/api/task/task";
import {allInstitution} from "@/api/institution/institution";

export default {
    components: { PersButton, page },
    data() {
        return {
            province_list: [],
            city_list: [],
            district_list: [],
            institution_list: [],

            year_list: [],
            labelPosition: "right",
            tableData: [],
            pageSize: 30, //一页显示多少条
            total: 0,
            pageNumber: 1,
            searchForm: {
                province_id: "",
                city_id: "",
                district_id: "",
                institution_id: "",
                name: "",
                phone: "",
                age_group: "",
                position: "",
                sex: "",
                sfz: "",
                ct_date: "",
                blbg_time: "",
                approve: "",
                province_status: false,
                city_status: false,
                district_status: false,
                institution_status: false,
                created_at: "",
                nj_staff: "",
                town_id: "",
                village_id: "",
                census_status: "1",
                years: "2024",
            },
            censuss_list: [
                { value: "1", label: "按机构统计" },
                { value: "2", label: "按地区统计" },
            ],
        };
    },
    created() {
        this.getProvince();
        this.init();
     this.getInstitutionList();
        this.getList();
        this.getListTask();
    },
    activated() {
        this.getList();
        // this.getTaskSelect();
    },
    mounted() { },
    computed: {},
    methods: {
        getListTask() {
                let param = {
                    pageSize: 100,
                    page: 1,
                }
                listTask(param).then((res) => {
                    if (res.code === 200) {
                        console.log( res.data);
                        this.year_list = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
        getInstitutionList() {
                let param = {
                    institution_id: this.searchForm.institution_id,
                };
                allInstitution(param).then((res) => {
                    if (res.code === 200) {
                        this.institution_list = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
        init() {
            let role = this.$store.state.member.role;
            //省级
            if (role == 13) {
                this.searchForm.province_status = true;
                this.searchForm.province_id = parseInt(
                    this.$store.state.member.province_id
                );
                this.regionCitys();
            } else if (role == 12) {
                //市级
                //搜索
                this.searchForm.province_status = true;
                this.searchForm.province_id = parseInt(
                    this.$store.state.member.province_id
                );
                this.searchForm.city_status = true;
                this.searchForm.city_id = parseInt(this.$store.state.member.city_id);
                this.regionCounty();
            } else if (role == 18) {
                //区县级
                this.searchForm.province_status = true;
                this.searchForm.province_id = parseInt(
                    this.$store.state.member.province_id
                );
                this.searchForm.city_status = true;
                this.searchForm.city_id = parseInt(this.$store.state.member.city_id);
                this.searchForm.district_status = true;
                this.searchForm.district_id = parseInt(
                    this.$store.state.member.district_id
                );
            } else if (role == 6 || role == 7 || role == 9 || role == 17) {
                //筛查机构
                //搜索
                this.searchForm.province_status = true;
                this.searchForm.province_id = parseInt(
                    this.$store.state.member.province_id
                );
                this.searchForm.city_status = true;
                this.searchForm.city_id = parseInt(this.$store.state.member.city_id);
                this.searchForm.district_status = true;
                this.searchForm.district_id = parseInt(
                    this.$store.state.member.district_id
                );
                this.searchForm.institution_status = true;
                this.searchForm.institution_id = parseInt(
                    this.$store.state.member.institution_id
                );
            }
        },
        closeDialog() { },
        //机构管理
        // institutionAllApi() {
        //     //清除机构选项
        //     this.searchForm.institution_id = "";
        //     institutionAll({
        //         province_id: this.searchForm.province_id,
        //         city_id: this.searchForm.city_id,
        //         district_id: this.searchForm.district_id,
        //     }).then((res) => {
        //         if (res.code == "200") {
        //             this.institution_list = res.data;
        //         }
        //     });
        // },
        getProvince() {
            regionProvince().then((res) => {
                if (res.code == "200") {
                    this.province_list = res.data;
                    //清除子类数据
                    this.searchForm.city_id = "";
                    this.searchForm.district_id = "";
                    this.city_list = [];
                    this.district_list = [];
                }
            });
        },
        regionCitys() {
            regionCity({ pid: this.searchForm.province_id }).then((res) => {
                if (res.code == "200") {
                    //清除子类数据
                    this.searchForm.city_id = "";
                    this.searchForm.district_id = "";
                    this.city_list = [];
                    this.district_list = [];
                    this.city_list = res.data;
                    // this.institutionAllApi();
                }
            });
        },
        regionCounty() {
            regionCounty({ pid: this.searchForm.city_id }).then((res) => {
                if (res.code == "200") {
                    this.searchForm.district_id = "";
                    this.district_list = res.data;
                    // this.institutionAllApi();
                }
            });
        },
        handleReset() {
            this.searchForm.province_id = "";
            this.searchForm.city_id = "";
            this.searchForm.district_id = "";
            this.searchForm.institution_id = "";
            this.searchForm.name = "";
            this.searchForm.phone = "";
            this.searchForm.age_group = "";
            this.searchForm.year_time = "";
            this.searchForm.position = "";
            this.searchForm.sex = "";
            this.searchForm.sfz = "";
            this.searchForm.ct_date = "";
            this.searchForm.blbg_time = "";
            this.searchForm.approve = ""; //筛选条件
            this.searchForm.created_at = ""; //筛选条件
            this.searchForm.nj_staff = "";
            this.pageNumber = 1;
            this.pageSize = 30;
            this.init();
            this.getList();
        },
        //查询提交
        submitForm() {
            this.pageNumber = 1;
            this.getList();
        },
        handleClickExport() {
            let param = {
                uid: this.$store.state.member.uid,
                province_id: this.searchForm.province_id,
                city_id: this.searchForm.city_id,
                district_id: this.searchForm.district_id,
                institution_id: this.searchForm.institution_id,
                institution_ids: this.$store.state.member.institution_id,
                name: this.searchForm.name,
                phone: this.searchForm.phone,
                years: this.searchForm.years,
                sex: this.searchForm.sex,
                sfz: this.searchForm.sfz,
                ct_date: this.searchForm.ct_date,
                blbg_time: this.searchForm.blbg_time,
                created_at: this.searchForm.created_at,
                approve: this.searchForm.approve,
                nj_staff: this.searchForm.nj_staff,
                page: this.pageNumber,
                pageSize: this.pageSize,
                town_id: this.searchForm.town_id,
                village_id: this.searchForm.village_id,
                census_status: this.searchForm.census_status,
                export: 1,
            };
            window.location.href = this.setQueryPath(
                process.env.VUE_APP_API + "/data/dataReport/download",
                param
            );
        },
        setQueryPath(url, queryData) {
            var _str = "";
            for (var o in queryData) {
                _str += o + "=" + queryData[o] + "&";
            }
            var _str = _str.substring(0, _str.length - 1);
            return url + "?" + _str;
        },
        handleSeach() {
            if (!this.searchForm.years) {
                this.$message({
                    message: "请选择筛查年度",
                    type: "error",
                });
                return;
            }
            if (
                this.searchForm.year_time &&
                this.searchForm.ct_date &&
                this.searchForm.year_time != this.searchForm.ct_date[0].substr(0, 4)
            ) {
                this.$message({
                    message: "筛查年度与内镜年度必须同一年",
                    type: "error",
                });
                return;
            }
        },
        getList() {
            this.handleSeach();

            let param = {
                uid: this.$store.state.member.uid,
                province_id: this.searchForm.province_id,
                city_id: this.searchForm.city_id,
                district_id: this.searchForm.district_id,
                institution_id: this.searchForm.institution_id,
                name: this.searchForm.name,
                phone: this.searchForm.phone,
                age_group: this.searchForm.age_group,
                years: this.searchForm.years,
                position: this.searchForm.position,
                sex: this.searchForm.sex,
                sfz: this.searchForm.sfz,
                ct_date: this.searchForm.ct_date,
                blbg_time: this.searchForm.blbg_time,
                created_at: this.searchForm.created_at,
                approve: this.searchForm.approve,
                nj_staff: this.searchForm.nj_staff,
                page: this.pageNumber,
                pageSize: this.pageSize,
                town_id: this.searchForm.town_id,
                village_id: this.searchForm.village_id,
                census_status: this.searchForm.census_status,
                export: 0,
            };

            getDataReportList(param)
                .then((result) => {
                    this.tableData = result.data.data;
                    this.total = result.data.total;
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        //分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
        },
        //分页
        handleCurrentChange(val) {
            this.pageNumber = val;
            this.getList();
        },
        childByPage(pageNumber, pageSize, total) {
            this.pageNumber = pageNumber;
            this.pageSize = pageSize;
            this.total = total;
            this.getList();
        },
    },
    watch: {
        "searchForm.ct_date"(newVal) {
            if (newVal == null) {
                this.searchForm.ct_date = "";
            }
        },
        "searchForm.blbg_time"(newVal) {
            if (newVal == null) {
                this.searchForm.blbg_time = "";
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.1s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
}

.block-back {
    width: 40px;
    height: 25px;
    background-color: #d1cfcf;
    border-radius: 0px 0px 8px 8px;
    text-align: center;
    opacity: 0.3;
}

.block-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dialog-footer {
    text-align: center;
}

.not-block-image {
    width: 100%;
    text-align: center;
}

.el-icon-circle-close {
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: 2;
    font-size: 20px;
}

.is_show {
    color: red;
}

.is_show_n {
    color: rgb(17, 226, 63);
}

.el-col {
    float: none;
    display: inline-block;
}

.upload-demo {
    display: inline;
}

#search,
#body,
#functional,
#page {
    padding-top: 20px;
}

.el-dialog__footer {
    text-align: center;
}
</style>
